<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				border: #FFA500 solid 1px;
				width: 600px;
				border-collapse: collapse;
			}

			table th {
				border-bottom: #FFA500 solid 1px;
				background-color: antiquewhite;
				padding: 10px;
			}

			table td {
				border: #FFA500 solid 1px;
				padding: 10px;
			}

			.cur {
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<table>

			<th>用户ID</th>
			<th>用户名称</th>
			<th>部门</th>
			<th>手机</th>
			</tr>
			<tr>
				<td>1</td>
				<td>zhangsan</td>
				<td>研发部门</td>
				<td>15999999999</td>
			</tr>
			<tr>
				<td>1</td>
				<td>zhangsan</td>
				<td>研发部门</td>
				<td>15999999999</td>
			</tr>
			<tr>
				<td>1</td>
				<td>zhangsan</td>
				<td>研发部门</td>
				<td>15999999999</td>
			</tr>
			<tr>
				<td>1</td>
				<td>zhangsan</td>
				<td>研发部门</td>
				<td>15999999999</td>
			</tr>
		</table>
		<script type="text/javascript">
			var table = document.querySelector("table");
			var trs = table.rows;
			trs = Array.from(trs);
			// for (var i = 0; i < trs.length; i++) {
			// 	trs[i].onmouseover = function() {
			// 		this.className = "cur";
			// 	}

			// 	trs[i].onmouseout = function() {
			// 		this.className = "";
			// 	}
			// }
			trs.forEach(function(tr) {
				tr.addEventListener("mouseover", function(val) {
					this.className = "cur";
				});
				tr.addEventListener("mouseout", function(val) {
					this.className = "";
				})
			})
		</script>
	</body>
</html>
